{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}视频监控页{% endblock %}

{% block my_css %}

    <link rel="stylesheet" href="{% static 'css/video.css' %}">
    <link rel="stylesheet" href="{% static 'css/video_home.css' %}">
    <link rel="stylesheet" href="{% static 'css/video-js.css' %}">

{% endblock %}

{% block nav_video %}active-nav{% endblock %}

{% block content %}

    <div class="layui-fluid color-body">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-sm2">
                <div class="video-left" id="manage-left">
                    <ul id="video-tree">

                    </ul>
                </div>
            </div>
            <div class="layui-col-sm10">
                <div class="warn-map" id="allmap">

                </div>
            </div>
            <div class="warn-list">
                <ul>
                    <li>
                        <strong id="demo1">全部</strong>
                        <span>(27)</span>
                    </li>
                    <li>
                        <strong>在线</strong>
                        <span>(27)</span>
                    </li>
                    <li id='show-down'>
                        <strong>离线</strong>
                        <span>(0)</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="show-maps">
        {% for map in show_maps %}
            <p>{{ map.name }}</p>
        {% endfor %}
    </div>
    <div class="warn-tips" id="warn-tips" style="display:none">

    </div>

    <script id="warn-content-tree" type="text/html">

        {% verbatim %}

        <div class="warn-tips-top">
            <p id="warn-content-1">
                {{ name }}
            </p>
        </div>
        <div class="warn-tips-1">
            <div class="warn-content-2">
                <video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls
                       preload="auto" autoplay
                       poster="/static/images/demo.jpg" width="620" height="349"
                       data-setup='{}'>
                </video>
            </div>
        </div>

        {% endverbatim %}

    </script>

    <script id="warn-content" type="text/html">

        {% verbatim %}

        <div class="warn-tips-top">
            <p id="warn-content-1">
                {{ name }}
            </p>
        </div>
        <div class="warn-tips-1">
            <div class="warn-content-2">
                <video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls
                       preload="auto" autoplay
                       poster="/static/images/demo.jpg" width="620" height="349"
                       data-setup='{}'>
                </video>
            </div>
        </div>

        {% endverbatim %}
    </script>

{% endblock %}

{% block my_js %}

    <script src="{% static 'js/bdmap.js' %}"></script>
    <script src="{% static 'js/video_home.js' %}"></script>
    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'js/video.js' %}"></script>

    <script>
        // 视频监控页面树结构兼容小屏幕
        $(document).ready(function (param) {
            var width = $(window).width();
            if (width <= 1366) {
                var maps = $('#allmap');
                var map = $('#manage-left');
                maps.css('width', '880px');
                map.css('width', '260px');
                maps.css('magin-left', '30px');
            }
        })
    </script>

{% endblock %}
